<template>
  <div class="app-container CustomerApplyDetails">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="list-ditem">
          客户名称：
          <div>{{data.companyName}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          客户logo：
          <div>
            <el-image :src="data.companyLogo">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          客户类型：
          <div>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.company_type" :value="data.companyType"/>
            </template>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="list-ditem">
          联系人：
          <div>{{data.name}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          电话：
          <div>{{data.mobile}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          所属行业：
          <div>{{data.industryname}}</div>
        </div>
      </el-col>

    </el-row>

    <el-row :gutter="20">
      <el-col :span="8">
        <div class="list-ditem">
          联系邮箱：
          <div>{{data.email}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          通讯地址：
          <div>{{data.address}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          规模：
          <div>{{data.scale}}</div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="8">
        <div class="list-ditem">
          客户状态：
          <div>
            <template slot-scope="scope">
              <dict-tag :options="dict.type.company_status" :value="data.companystatus"/>
            </template>
          </div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          法人：
          <div>{{data.legalPerson}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          职务：
          <div>{{data.post}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="list-ditem">
          入孵时间：
          <div>{{data.incubatorTime}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          注册资金：
          <div>{{data.registerMoney}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          注册成立时间：
          <div>{{data.registerTime}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="list-ditem">
          统一信用代码：
          <div>{{data.socialCreditCode}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          技术领域：
          <div>{{data.technicalField}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          状态：
          <div>{{["正常","禁用"][data.status]}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="list-ditem">
          企业性质：
          <div>{{data.companyNature}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          是否优质企业：
          <div>{{data.hot}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          注册地址：
          <div>{{data.companyAddress}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="list-ditem">
          所属国家：
          <div>{{data.companyCountry}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          结束时间：
          <div>{{data.registerendTime}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          经营状态：
          <div>{{data.managementType}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="list-ditem">
          登记机关：
          <div>{{data.registrationAuthority}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          客户描述：
          <div>{{data.companyDesc}}</div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="list-ditem">
          营业范围：
          <div>{{data.businessScope}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div class="list-ditem">
          客户图片集：
          <div>
            <el-image :src="data.companyImgs">
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </div>
        </div>
      </el-col>
    </el-row>
     <el-divider content-position="left">跟进信息</el-divider>

        <el-table v-loading="loading" :data="customerList">
          <el-table-column label="序号" align="center" prop="id"/>
          <el-table-column label="跟进人" align="center" prop="userId"/>
          <el-table-column label="意向水平" align="center" prop="intentionState">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.merchantsrecord_type" :value="scope.row.intentionState"/>
            </template>
          </el-table-column>
          <el-table-column label="跟进方式" align="center" prop="investigationMode">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.merchantsrecord_method" :value="scope.row.investigationMode"/>
            </template>
          </el-table-column>
          <el-table-column width="400" label="跟进记录" align="center" prop="record"/>


          <!--<el-table-column label="跟进事件" align="center" prop="companyName"/>
          <el-table-column label="状态" align="center" prop="name"/>
          <el-table-column label="线索来源" align="center" prop="mobile"/>
          <el-table-column label="更新时间" align="center" prop="createTime" width="180">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="创建人" align="center" prop="mobile"/>-->
        </el-table>
        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
        <div class="CustomerApplyDetailsFooter">
          <el-button type="primary" @click="FollowClues">跟进线索</el-button>
          <el-button @click="cancel">返回</el-button>
        </div>
    </div>


</template>
<style lang="scss">
  .app-main {
    background: #E7E7E7;
  }

  .app-container {
    margin: 15px;
    background: #fff;
    border-radius: 5px;
  }

  .CustomerApplyDetails {
    .list-ditem {
      display: flex;
      align-items: flex-start;
      font-size: 15px;
      color: #595959;
      > div {
        width: 180px;
      }
    }

    .el-button {
      display: block;
      margin: 30px auto;
    }
  }
</style>
<script>
 import {listRecord} from "@/api/customer/record";

  export default {
    name: "CustomerApplyDetails",
    // dicts: ['sys_status', 'contarct_status', 'rent_month_type', 'unit_type'],
    data() {
      return {
        //主要信息
          data: "",
          //跟进信息
          customerList: [],
          // 遮罩层
          loading: true,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
          },
          // 总条数
          total: 0,
      };
    },
    created() {
      this.data = this.conductionData.customerDetails;
      console.log(this.data);
    },
    methods: {
      getList() {
        const id = this.conductionData.customerDetails.id;
        this.loading = true;
        listRecord({...this.queryParams,customerId:id}).then(response => {
          this.customerList = response.rows;
          this.total = response.total;
          this.loading = false;
        });

    },
    // 跟进线索
    FollowClues() {
      this.conductionData.customermerchantsdetails = this.data;
      this.$router.push({
        path: "/customer/followup"
      })
    },
    cancel() {
      this.$router.go(-1);
    }
    }
  };
</script>
